vue+ts 使用lodash防抖处理数据

您所在的位置：网站首页 › debounce vue用法 › vue+ts 使用lodash防抖处理数据

vue+ts 使用lodash防抖处理数据

2024-07-16 18:49| 来源: 网络整理| 查看: 265

使用lodash中的防抖和节流 Vue中使用debounce防抖（ts）使用的流程 1.安装 npm i --save lodash 2.在需要使用的文件中进行引入

完整引入

import _ from 'lodash' // 这个方式 webpack 依然会将整个库打包。 import { random, debounce, findLast } from 'lodash'

按需引入

单独引入 import debounce from "lodash/debounce"; //当引用的方法过多时，弊端自现 3.防抖中的参数的介绍 debounce API走起 _.debounce(func, [wait=0], [options={}]) func (Function): 要防抖动的函数。 [wait=0] (number): 需要延迟的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=false] (boolean): 指定在延迟开始前调用，默认false。 [options.maxWait] (number): 设置 func 允许被延迟的最大值。 [options.trailing=true] (boolean): 指定在延迟 testThrottle: _.throttle(function() { console.log("throttle"); }, 5000, { leading: true, trailing: false }) 一、抽象组件使用方式 1、封装抽象组件（debounce.js 文件） import Vue from 'vue']() const debounce = (func, time, ctx, immediate) => { let timer const rtn = (...params) => { clearTimeout(timer) if (immediate) { let callNow = !timer timer = setTimeout(() => { timer = null }, time) if (callNow) func.apply(ctx, params) } else { timer = setTimeout(() => { func.apply(ctx, params) }, time) } } return rtn } Vue.component('Debounce', { abstract: true, props: ['time', 'events', 'immediate'], created() { this.eventKeys = this.events && this.events.split(',') }, render() { const vnode = this.$slots.default[0] // 如果默认没有传 events，则对所有绑定事件加上防抖 if (!this.eventKeys) { this.eventKeys = Object.keys(vnode.data.on) } this.eventKeys.forEach(key => { vnode.data.on[key] = debounce( vnode.data.on[key], this.time, vnode, this.immediate ) }) return vnode } }) 2、组件使用方式

引入全局组件

首先需要将 debounce.js 文件在入口文件（main.ts）中全局引入。当然也可以按照需要修改 debounce.js 文件，按需引入。

import Vue from 'vue' import App from './App.vue' ... import '@/xxx/debounce' 3、在模版中使用

在模版中使用

其中time为必选参数。 event 和 immediate 参数都是可选参数。

如果组件下有多个事件绑定，那么 event 可以自定义需要进行防抖处理的事件。

如果需要立即执行的话，可以将 immediate 参数设置为 true。

点击我 import { Vue, Component } from 'vue-property-decorator' @Component export default class Test extends Vue { print(v: number) { console.log(v) } print2(v: number) { console.log(v) } } 第二种使用方式 Click me as fast as you can! import _ from 'lodash' export default { methods: { throttledMethod: _.debounce(() => { console.log('I only get fired once every two seconds, max!') }, 2000) } } 二、普通使用方式 1、安装并引入 lodash 库，直接使用。 click me! import { Vue, Component } from 'vue-property-decorator' import * as _ from 'lodash' export default class Service extends Vue { private clickButton = _.debounce(this.print, 500, { leading: true, trailing: false }) private print(v: number) { console.log(v) } } Vue中使用throttle节流（ts） 1.节流的基本使用 throttle API走起 _.throttle(func, [wait=0], [options={}]) func (Function): 要节流的函数。 [wait=0] (number): 需要节流的毫秒数。 [options={}] (Object): 选项对象。 [options.leading=true] (boolean): 指定调用在节流开始前，默认true。 [options.trailing=true] (boolean): 指定调用在节流结束后，默认true。 testThrottle: _.throttle(function() { console.log("throttle"); }, 5000, { leading: true, trailing: false }) 2.节流在项目中的应用 Click me as fast as you can! import _ from 'lodash' export default { methods: { throttledMethod: _.throttle(() => { console.log('I get fired every two seconds!') }, 2000) } } 3.节流的含义 testThrottle方法被绑定在一个按钮上，demo最终的效果是： 1、按钮点击后控制台立马打印了throttle——19:39:00； 2、5秒内点击多次按钮，最终只打印一次throttle——19:39:05前； 3、5秒后再点击一次，会重新打印throttle——19:39:05后； PS：lodash默认trailing为true，那么最终的效果是在点击时会立即打印throttle，且5秒后又会再打印一次，即节流之前和之后都会执行该节流函数。

【本文地址】

vue+ts 使用lodash防抖处理数据

vue+ts 使用lodash防抖处理数据

今日新闻

推荐新闻